<template>
	<view class="wrap">
		<view class="container">
			<navBar>
				<template slot="title">
					<view>易市集</view>
				</template>
			</navBar>
			<u-search :show-action="true" action-text="搜索" :animation="true" height="70" border-color='#FFC300'
				bg-color='#fff' :clearabled="true" v-model="searchQuery" @search='searchEvent()' @custom='searchEvent()'
				style="margin: 15rpx;"></u-search>
			<!-- <u-button @click="clear">清空列表</u-button> -->
			<view class="banner">
				<image src="../../static/image/上面.svg" mode="aspectFit" style="width: 97%; height: 97%;"></image>
			</view>
			<view class="menu">
				<u-button :ripple="true" class="custom-style" @click="changeCategory('all')">全部</u-button>
				<u-button :ripple="true" class="custom-style" @click="changeCategory('latest')">最新</u-button>
				<u-button :ripple="true" class="custom-style" @click="changeCategory('hot')">最热</u-button>
			</view>
			<u-empty text="没有搜索结果" mode="search" v-if="searchEmpty"></u-empty>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.imgUrl" :index="index"
							@click="showImage(item,0)"></u-lazy-load>
						<view class=" demo-title">
							{{item.illustrate}}
						</view>
						<view class="demo-price" style="color: #FDCA56;">
							<u-icon name="rmb-circle-fill" color='#FDCA56'></u-icon>
							{{item.price}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" :style="{background:item.isSell==1?'#FC745F':'#23AF1D'}">
								{{item.isSell==1?'已售':'代售'}}
							</view>
							<view class="demo-tag-text" @click="openContactSeller(item)">
								联系他
							</view>
						</view>
						<view class="demo-shop">
							{{item.name}}
						</view>
						<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
						@click="remove(item.id)"></u-icon> -->
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.imgUrl" :index="index"
							@click="showImage(item,0)"></u-lazy-load>
						<view class="demo-title">
							{{item.illustrate}}
						</view>
						<view class="demo-price" style="color: #FDCA56;">
							<u-icon name="rmb-circle-fill"></u-icon>
							{{item.price}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" :style="{background:item.isSell==1?'#FC745F':'#23AF1D'}">
								{{item.isSell==1?'已售':'代售'}}
							</view>
							<view class="demo-tag-text" @click="openContactSeller(item)">
								联系他
							</view>
						</view>
						<view class="demo-shop">
							{{item.name}}
						</view>
						<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
						@click="remove(item.id)"></u-icon> -->
					</view>
				</template>
			</u-waterfall>
			<u-popup v-model="show" mode="center" width="80%" height="70%" border-radius="14">
				<view class="popup">
					<image :src="popupImage" mode="aspectFit" style="width: 100%; min-height: 80%; max-height: 70%s;">
					</image>
					<view class="popupDetail">
						<!-- {{popupDetail}} -->
						<scroll-view scroll-y="true" style="height: 135%; background: #EFFAEC; padding: 15rpx;">
							{{popupDetail}}
						</scroll-view>
					</view>

					<u-icon name="close-circle" size="60" class="icon" @click='show=false'></u-icon>
				</view>
			</u-popup>
			<u-back-top :duration='duration' bottom='120' right='60' :scroll-top="scrollTop" :icon-style="iconStyle"
				:custom-style='customStyle'></u-back-top>
			<u-modal v-model="showContact" show-cancel-button :content="content" @confirm="contactSeller()"
				:title-style="{color: 'red'}" :zoom="true"></u-modal>
			<u-loadmore bg-color="#EFFAEC" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import comm from "@/comm/comm.js"
	import navBar from "@/components/navBar.vue"
	import {
		h
	} from "vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				queryDefault: {
					page: 1,
					pageSize: 10
				},
				duration: 200,
				customStyle: {
					background: '#EFFAEC'
				},
				iconStyle: {
					fontSize: '32rpx',
					// color: '#2979ff',
				},
				scrollTop: 0, // 返回顶部
				content: '请注意个人隐私', //  前往私信的model框内容
				showContact: false, // 前往私信的model框
				show: false, // 浮窗
				popupImage: '', // 浮窗的图片
				popupDetail: '', // 浮窗的详情
				loadStatus: 'loadmore',
				flowList: [],
				list: [], // 瀑布流数据
				searchQuery: '', // 搜索
				searchEmpty: false, // 没有搜索结果
				userInfo: null, // 当前用户的信息,
				randomArr: [], // 验证随机数重复的数组
				j: 10, // 随机的次数
				lastLength: 0

			}
		},
		async onLoad() {
			await this.queryData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.queryDefault.page * this.queryDefault.pageSize > this.list.length) {
				this.loadStatus = 'false';
				return
			}
			console.log(1);
			this.loadStatus = 'loading';
			this.queryDefault.page++
			this.queryData()
		},
		methods: {
			/**
			 * 打开私信确认
			 *  @param {Object} userInfo 用户信息
			 */
			openContactSeller(userInfo) {
				this.showContact = true;
				this.userInfo = userInfo
			},
			/**
			 * 跳转到私信
			 *
			 */
			contactSeller() {
				console.log(2);
				uni.navigateTo({
					url: ''
				})
			},

			/**
			 * 图片放大的浮窗
			 * @param {Object} item 当前项的展示数据
			 */
			showImage(item, index) {
				console.log(item);
				this.show = true
				this.popupImage = item.imgUrl
				this.popupDetail = item.illustrate
			},
			/**
			 * 加载瀑布流
			 */
			addRandomData() {
				let index; // 随机数
				this.list.length < (this.queryDefault.page * 10) ? this.j = (this.queryDefault.page * 10 - this.list
						.length) :
					this.j = 10
				this.lastLength = this.list.length - this.j
				this.lastLength < 0 ? this.lastLength = 0 : this.lastLength = this.lastLength
				for (let i = 0; i < this.j; i++) {
					do {
						index = this.$u.random(this.lastLength, this.list.length - 1);
					} while (this.randomArr.includes(index));
					this.randomArr.push(index)
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
				console.log(this.flowList);
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			reset() {
				this.randomArr = []; // 验证随机数重复的数组
				this.j = 10; // 随机的次数
				this.lastLength = null;
				this.searchEmpty = false;
				this.loadStatus = 'loading';
			},
			/**
			 * @param {Object} searchQuery 搜索内容
			 */
			queryData(searchQuery) {
				this.reset()
				// 请求数据
				let url = '/works/market/page';
				let method = 'GET';
				let data = {
					...this.queryDefault,
					illustrate: searchQuery
				};
				let header = undefined;
				let isModel = false
				console.log(data);
				// 请求的数据， 如果没有数据可传空对象 {}

				comm.request(url, method, data, header, isModel).then(({
					data
				}) => {
					if (!data.data.records.length) {
						console.log(1);
						this.searchEmpty = true
						this.loadStatus = 'false';
						this.searchQuery = ''
						return
					}
					console.log(data);
					let res = data.data.records
					res.forEach((item) => {
						item.imgUrl = item.imgUrl.split(',')[0]

					})
					this.list.push(...res)
					console.log(this.list);
					this.addRandomData();
					this.loadStatus = 'loadmore';
				})
			},

			/**
			 * 搜索事件
			 */
			searchEvent() {
				this.reset()
				this.queryDefault = {
					page: 1,
					pageSize: 10
				}
				this.list = [];
				this.$refs.uWaterfall.clear();
				this.queryData(this.searchQuery)

				// console.log(this.searchQuery)
				// // 请求数据
				// let url = '/works/market/search';
				// let method = 'GET';
				// let data = {
				// 	illustrate: this.searchQuery
				// };
				// let header = undefined;
				// let isModel = false
				// this.$refs.uWaterfall.clear();
				// // 请求的数据， 如果没有数据可传空对象 {}
				// comm.request(url, method, data, header, isModel).then(({
				// 	data
				// }) => {
				// 	if (!data.data.length) {
				// 		console.log(1);
				// 		this.searchEmpty = true
				// 		this.loadStatus = 'false';
				// 		this.searchQuery = ''
				// 		return
				// 	}
				// 	this.list = data.data
				// 	this.list.forEach((item) => {
				// 		item.imgUrl = item.imgUrl.split(',')[0]

				// 	})
				// 	this.list = this.list
				// 	this.addRandomData();
				// 	this.loadStatus = 'loadmore';
				// 	this.searchQuery = ''
				// })
			},
			/**
			 * 切换类别
			 * @param {Object} category 类别
			 */
			changeCategory(category) {
				this.reset()
				if (category === 'all') {
					console.log(category);
					this.queryDefault = {
						page: 1,
						pageSize: 10
					}
					this.list = [];
					this.$refs.uWaterfall.clear();
					this.queryData()
				}
				if (category === 'latest') {
					this.queryDefault = {
						page: 1,
						pageSize: 10
					}
					this.list = [];
					// 请求数据
					let header = undefined;
					let isModel = false
					let url = '/works/market/latest';
					let method = 'GET';
					let data = this.queryDefault;
					this.$refs.uWaterfall.clear();
					// 请求的数据， 如果没有数据可传空对象 {}
					comm.request(url, method, data, header, isModel).then(({
						data
					}) => {
						let res = data.data.records
						res.forEach((item) => {
							item.imgUrl = item.imgUrl.split(',')[0]

						})
						// this.list = this.list
						this.list.push(...res)
						console.log(this.list);
						this.addRandomData();
						this.loadStatus = 'loadmore';
					})
				}
				if (category === 'hot') {
					this.queryDefault = {
						page: 1,
						pageSize: 10
					}
					this.list = [];
					// 请求数据
					let url = '/works/market/hot';
					let method = 'GET';
					let data = this.queryDefault;
					let header = undefined;
					let isModel = false
					this.$refs.uWaterfall.clear();
					// 请求的数据， 如果没有数据可传空对象 {}
					comm.request(url, method, data, header, isModel).then(({
						data
					}) => {
						console.log(data);
						let res = data.data.records
						res.forEach((item) => {
							item.imgUrl = item.imgUrl.split(',')[0]

						})
						this.list.push(...res)
						this.addRandomData();
						this.loadStatus = 'loadmore';
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.u-waterfall {
		background: #EFFAEC;
	}

	.container {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background: #EFFAEC;
	}

	.popup {
		background: #EFFAEC;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.popupDetail {
			background: #EFFAEC;
			text-indent: 2rem;
		}

		.icon {
			position: fixed;
			bottom: 17%;
			left: 46%;
			color: rgba(0, 0, 0, .6);
		}
	}

	.banner {
		width: 100%;
		height: 400rpx;
		margin: 0 10rpx;

	}

	.menu {
		width: 100%;
		display: flex;
		justify-content: start;
		margin-top: -10rpx;

		.custom-style {
			margin: 0;
			border-radius: 15rpx;
			font-size: 36rpx;
			margin: 20rpx 10rpx;
			width: 120rpx;
			height: 70rpx;
			color: #FFFFFF;
			font-weight: bold;
			background-color: #92C5B0;
		}

		.custom-style:nth-of-type(2) {
			background-color: #CFDA27;
		}

		.custom-style:nth-of-type(3) {
			background-color: #F0B359;
		}
	}


	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $uni-text-color;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $uni-color-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid$uni-color-primary;
		color: $uni-color-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $uni-color-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $uni-text-color-grey;
		margin-top: 5px;
	}
</style>